こんにちは！
システムソリューション営業本部2年目の加藤です。

Power Appsでの練習アプリ作成シリーズの第5回目です！
今回は、「テキスト入力」を使ってみましょう！


前回までの内容をご覧になっていない方は、ぜひご覧ください！


【Power Apps初心者向け】基本操作がわかる！練習アプリを作ろう！ 　シリーズ

#1 画面とラベルの作成、画面移動、エラー確認
#2 アイコンの作成と設定
#3 配置と配列
#4 引数の指定（Navigate関数）



また、ほかの社員が書いた、Power Appsのもう少し高度な内容を扱った記事もございますので、
こちらもぜひご覧ください！

• Power Platformによるペーパレス化でリモートワークの問題を解決
  
• 【Power Platform】Power Appsで在宅勤務状況確認アプリを作った話(テレワーク対策）
• Power Apps作例：リモートワーク環境でブレインストーミングするためのツールを作ってみた
• Power Appsでautocompleteを実装する

前回の振り返りと今回の内容

第4回では、以下のことができるようになりました！

• 数式から、関数にどのような引数が使えるのかを確認する
• Navigate関数に画面の切り替え方法の引数を指定する

「挿入」タブを見ていただくと、
これまでの回で扱ったもののほかにも、
まだたくさんのアイテムが並んでいますね。

このブログで取り上げるアイテム以外にも、
ぜひご自身でいろいろと試してみてくださいね！



今回は、「テキスト入力」を使ってみます。
名前の通り、テキスト入力ができる入力欄のことです。

アプリ内でどのように活用できそうでしょうか？
早速使ってみましょう！

テキスト入力を配置してみよう！

Screen2に「テキスト入力」を配置します。

「テキスト入力」は、「挿入」タブの
「テキスト」から選択して挿入できます。





また、「入力」からも選択して挿入できます。




Screen2に「テキスト入力」を配置すると、
「TextInput1」というアイテムがツリービューに加わったと思います。


「TextInput1」を選択すると、
「Default」の値（入力欄にデフォルトで入っている値）が
「"テキスト入力"」になっていることが確認できます。

動作を確認しよう！

それでは、早速動作を確認してみましょう。

右上の「アプリのプレビュー」をクリックします。
F5キーを押してもプレビューができます。




入力欄に入っている「テキスト入力」という文字を削除したり、
ほかの文字を入力できることが確認できたでしょうか？

私は「こんにちは」と入力してみました。





第1回で、アプリの動作確認の方法は2種類あるとご紹介しました。
また、2種類は使い分けることもおすすめしたのを覚えていらっしゃるでしょうか？


今回扱う「テキスト入力」は、
Altキーを押しながらの動作確認よりも、
先ほどのようにプレビュー画面からの確認がおすすめです。


理由は単純で、やってみるとわかると思いますが、
Altキーを押しながら、
ほかのキーを押してテキストを入力するのが大変だからです。


小さなことかもしれませんが、状況に応じた使い分けができると、
ちょっとPower Appsを使いこなせている感じがしますね！

プロパティの設定を考えよう！

編集画面に戻ってきたら、もう一度「TextInput1」を選択してください。

入力欄に入っているテキストが変わっても、
「Default」は「"テキスト入力"」のままですね。




アプリを使う際に、ユーザーが文字入力をしたからといって、
デフォルト値の設定が書き換えられることはないので、安心してください。


ただ、先ほどアプリを操作したときに気が付いたと思いますが、
デフォルトで入力欄に文字が入っていると、
ユーザーはその文字を一度消して、
新しい文字を入力しなければなりません。


ユーザーの手間を増やしてしまうので、
「Default」の値は空にしましょう。





もちろん、最初から値が入っていることで、
逆にユーザーの使いやすさにつながっている場合もあるかもしれませんので、
状況に応じて、設定するかどうか考えてみてください。


「Default」には関数を入れることもできます。

また、Power Appsでは、
現在ログインしているMicrosoftアカウントのユーザーの情報を取得することができます。

例えば、「User().FullName」と入力すれば、ユーザーの名前が表示されます。





「User().Email」と入力すればメールアドレスが表示されます。




ぜひ試してみてください！

このようなデフォルト値であれば、日報アプリ、経費申請アプリなどでは
むしろユーザーの入力の手間を省けるかもしれないですね。

関数と文字列の入力方法の違い

「"テキスト入力"」は「""」で囲まれていましたが、
「User().FullName」などの関数は、「""」で囲まないようにするのを注意してください！


「""」で囲まれた文字は、文字列として認識されるため、
関数としてではなく、文字列としてそのまま表示されてしまいます。





逆に、文字列を「""」で囲まないと、エラーになってしまいます。




最初は慣れないかもしれませんが、
徐々に身につくと思いますので、
たくさん操作する中で慣れていきましょう！

入力された文字を表示してみよう！

入力欄の値は、アプリ内で呼び出すことができます。

アプリのプレビューをして、入力欄になにか文字を入力してください。
私は再び「こんにちは」を入力しました。






入力できたら、
「ラベル」をクリックして、Screen2に「Label2」を配置します。




今、画面上で「Label2」は「テキスト」と表示されていますが、
ここに「TextInput1」に入力した、
「こんにちは」が表示されるようにしてみます。


「Label2」を選択すると、
「Text」の値には「テキスト」が入っています。


表示内容を編集したい場合は、「Text」の値を編集するんでしたね。
（第1回の復習ですね！）

ここに「TextInput1.Text」と入力してください。





入力欄に入力した、「こんにちは」が表示されるようになりました！




「TextInput1.Text」は、「TextInput1」に入力された、
テキストデータを取得できる数式です。


第1回では、「Screen1.Width」で画面の幅を取得しましたよね。

このように、アイテムのデータを取得して、
ほかのアイテムの動作を設定するということは、
アプリを作成していく中でよく使うと思います。

例えば、必須項目が空欄だったら次のページに進めないように設定するなど、
条件によって動作を変えるようなこともできるので、
ぜひ覚えておきましょう！

書き方も簡単です。
対象のアイテムの後ろに「.」を付けると
候補が下に出てきますので、入力ミスが防げそうですね！





数式の中で「&」を使うと、
関数とテキストを組み合わせることができます。

例えば、
「"みなさん、" & TextInput1.Text & "！"」
と入力すると、
「みなさん、こんにちは！」と表示されます。



テキストは「""」で囲む、関数は「""」で囲まない、という点を気をつけてください！



今回の内容は、少し長かったですが、ここまでです！
アプリは忘れずに保存して、最後に今回の内容を振り返りましょう！

今回の振り返り

今回の記事では、以下のことができるようになりました！

• テキスト入力欄の作成
• アプリのプレビュー方法の使い分け
• デフォルト値の設定
• Microsoftアカウント情報を取得する関数
• テキスト入力欄のテキストデータの取得
• 関数と文字を組み合わせる

次回もお楽しみに！

▼第六回を見る▼